<template>
<div class="container">
  <div class="content home" distance="55" v-pull-to-refresh="refresh">
    <v-layer></v-layer>
    <div class="header">
      <div class="head-left"></div>
      <slider :banner="banner"></slider>
      <div class="head-btn">
        <div class="btn-start">
          <a v-link="{path: '/kaishizhuan', replace: true}">
            <img src="../assets/images/home/start.png" alt="开始赚">
          </a>
        </div>
        <div class="btn-publish">
          <a v-link="{path: '/publish_task', replace: true}">
            <img src="../assets/images/home/publish.png" alt="发布任务">
          </a>
        </div>
      </div>
    </div>
    <div class="content-padded icons-demo">
      <div class="row">
        <div class="col-25">
          <a v-link="{path: '/toupiao', replace: true}">
            <span class="icon2">
              <img src="../assets/images/home/sina.png" alt="新浪微博">
            </span>
            <span class="icon2-label">新浪微博</span>
          </a>
        </div>
        <div class="col-25">
          <a v-link="{path: '/tixian', replace: true}">
            <span class="icon2">
              <img src="../assets/images/home/tixian.png" alt="提现">
            </span>
            <span class="icon2-label">提现</span>
          </a>
        </div>
        <div class="col-25">
          <a v-link="{path: '/message', replace: true}">
            <span class="icon2">
              <img src="../assets/images/home/kefu.png" alt="联系客服">
            </span>
            <span class="icon2-label">联系客服</span>
          </a>
        </div>
        <div class="col-25">
          <a v-link="{path: '/sys_news', replace: true}">
            <span class="icon2">
              <img src="../assets/images/home/news.png" alt="系统消息">
            </span>
            <span class="icon2-label">系统消息</span>
          </a>
        </div>
      </div>
      <div class="row" style="height:10px;"></div>
      <div class="row">
        <div class="col-25">
          <a v-link="{path: '/tuijianma', replace: true}">
            <span class="icon2">
              <img src="../assets/images/home/barcode.png" alt="我的推荐码">
            </span>
            <span class="icon2-label">我的推荐码</span>
          </a>
        </div>
        <div class="col-25">
          <a v-link="{path: '/xinshoujiaocheng', replace: true}">
            <span class="icon2">
              <img src="../assets/images/home/jiaocheng.png" alt="新手教程">
            </span>
            <span class="icon2-label">新手教程</span>
          </a>
        </div>
        <div class="col-25">
          <a v-link="{path: '/yongjin', replace: true}">
            <span class="icon2">
              <img src="../assets/images/home/yongjin.png" alt="佣金">
            </span>
            <span class="icon2-label">佣金</span>
          </a>
        </div>
        <div class="col-25">
          <a v-link="{path: '/ucenter', replace: true}">
              <span class="icon2">
                <img src="../assets/images/home/ucenter.png" alt="个人中心">
              </span>
              <span class="icon2-label">个人中心</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import Slider from '../components/Slider'
import VLayer from '../components/PullToRefreshLayer'
import $ from 'zepto'
export default {
  ready () {
    $.init()
    this.getAppToken()
  },
  data () {
    return {
      banner: []
    }
  },
  methods: {
    refresh () {
      let that = this
      setTimeout(function () {
        that.banner.push(new Date().getTime())
        $.pullToRefreshDone('.pull-to-refresh-content')
      }, 1500)
    },
    getAppToken () {
      let u = navigator.userAgent
      // 判断是否是Android设备
      if (!!u.match(/AppleWebKit.*Mobile.*/) && (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1)) {
        // $.alert('Android getToken()')
        window.Android.getToken()
      }
      // 判断是否是ios设备
      if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        // $.alert('iOS getToken()')
        window.webkit.messageHandlers.getToken.postMessage('a')
      }
    }
  },
  components: {
    Slider,
    VLayer
  }
}
</script>

<style scoped>
.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background-color:#FFF;
}
.header{width:100%;height:55%;background-image:url(../assets/images/home/header.png);background-size:100% 100%;background-repeat:no-repeat;}
.header .head-left{width:100%;height:100%;background-image:url(../assets/images/home/head-left.png);background-size:auto 90%;background-repeat:no-repeat;}
.swiper-slide{color:#FFF;}
.slide-container{position:absolute;left:0;bottom:0;width:100%;height:55px;padding:5px 10px;background-color:rgba(0,0,0,.15);}
.slide-container span{display:block;clear:both;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;}
.head-btn{position:absolute;top:33%;}
.head-btn .btn-start{width:45%;float:left;margin-left:5%;}
.head-btn .btn-publish{width:32%;float:left;margin:12% 0 0 6%;}
.head-btn img{width:100%;height:auto;}

.content-padded.icons-demo{margin:0 15px 5px 15px;}
.content-padded.icons-demo a{color:#3d4145;}
.color-white{color:#FFF;}
.bgcolor-white{background-color:#FFF;}
.icon2{width:100%!important;height:auto!important;text-align:center;display:inline-block;}
.icon2 img{width:auto;height:auto;max-width:90%;max-height:90%;}
.icon2-label{width:100%;text-align:center;font-size:12px;display:inline-block;}
</style>
